{include file="public/header" /}
<body class="right-desc">

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-btn-container" style="display: inline-block;padding: 15px">

            <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe666;</i>重载
            </button>
            <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe669;</i>刷新
            </button>
            <!--<button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button>-->
        </div>
        <div class="layui-btn-container" style="display: inline-block;">
            <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe668;</i>展开全部
            </button>
            <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe66b;</i>折叠全部
            </button>

        </div>
        <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
               style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
        <div class="layui-btn-container" style="display: inline-block;">
            <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
            <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#x1006;</i>清除搜索
            </button>
        </div>
        <div class="layui-btn-container" style="display: inline-block;">
            <button class="layui-btn layuiadmin-btn-admin layui-btn-sm layui-btn-normal" data-type="add">添加</button>
        </div>
        <div class="demo-side">
            <div style="padding-bottom: 10px;">

            </div>

            <table id="demoTreeTb"></table>
        </div>
    </div>
</div>


<form class="layui-form" action="" id="myform" lay-filter="example" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">顶级分类</label>
        <div class="layui-input-inline">
            <select name="parentid" id="parentid" lay-verify="required">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" lay-verify="required|title" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">值</label>
        <div class="layui-input-inline">
            <input type="text" name="value" lay-verify="required|value" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" name="ordernum" lay-verify="required|ordernum" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="id" id="id" value="" class="layui-input">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="savedata">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">重置</button>
        </div>
    </div>
</form>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.parentid == '0'){ }}
    <a class="layui-btn  layui-btn-xs" lay-event="add">添加子菜单</a>
    {{#  } else { }}

    {{#  } }}
</script>

{include file="public/footer" /}
<script>

    function getMenu(form) {
        $.ajax({
            url: "{:url('Sysdic/ajaxGetSysdicdata')}",
            data: {flag:"{$flag}"},
            type: "POST",
            success: function (data) {
                if(data){
                    var str = "<option value='0' selected>顶级菜单</option>";
                    for (var k in data) {
                        str += "<option value='" + data[k].id + "'>" + data[k].title + "</option>";
                    }

                    $("#parentid").html(str);
                }
            }
        });
    }
    layui.config({
        base: '__JS__/layui_exts/'
    }).use(['layer', 'util', 'treeTable','form','jquery'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        var form = layui.form;

        getMenu(form)
        form.render();
        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: "{:url('Sysdic/ajaxGetSysdiclist')}",
            //toolbar: 'default',
            where:{flag:"{$flag}"},    //向后台传递参数
            height: 'full-200',
            page: true,
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'id',
                pidName: 'parentid'
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {align: 'center',field: 'id', title: '序号'},
                    {align: 'center',field: 'title', title: '名称'},
                    {align: 'center',field: 'value', title: '值'},
                    {align: 'center',field: 'ordernum', title: '排序'},
                    {align: 'center', toolbar: '#tbBar', title: '操作'}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            if (event === 'del') {
                var data = {id:obj.data.id,type:event};
                ajaxSavedata(data,insTb);
            } else if (event === 'edit') {
                openForm('编辑',form,obj.data,event)
            } else if (event === 'add') {
                openForm('添加',form,obj.data,'add2')
            }
        });

        // 头部工具栏点击事件
        treeTable.on('toolbar(demoTreeTb)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('修改');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('提示');
                    break;
            }
        });

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // 展开指定
        $('#btnExpand').click(function () {
            insTb.expand(2);
        });

        // 折叠指定
        $('#btnFold').click(function () {
            insTb.fold(2);
        });

        // 设置选中
        $('#btnChecked').click(function () {
            insTb.expand(4);
            insTb.setChecked([4]);
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            $("#edtSearch").val('')
            insTb.clearFilter();
        });

        // 重载
        $('#btnReload').click(function () {
            insTb.reload();
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        // 获取选中
        $('#btnGetChecked').click(function () {
            layer.alert('<pre>' + JSON.stringify(insTb.checkStatus().map(function (d) {
                    return {
                        authorityName: d.authorityName,
                        authorityId: d.authorityId,
                        LAY_INDETERMINATE: d.LAY_INDETERMINATE
                    };
                }), null, 3) + '</pre>');
        });

        //事件
        var active = {
            add: function(){
                openForm('添加',form,'','add');
            }
        }
        $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听提交
        form.on('submit(savedata)', function(data){

            if(data.field.id){
                data.field.type='edit'
            }else {
                data.field.type='add'
            }
            ajaxSavedata(data.field,insTb);
            return false;
        });

    });

    function openForm(title,form,data,type) {
        $("#reset").click();//重置表单

        layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 1,
            title: title,
            area: ['370px', '50%'],
            shadeClose: true,
            content: $("#myform"),//引用的弹出层的页面层的方式加载修改界面表单
            success: function (layero) {

                if(type=='add2'){
                    $("#parentid").val(data.id)
                    $("#parentid").attr('disabled','disabled');//添加子菜单的时候禁止修改父级菜单
                    $('input[name="showstatus"]:checked').each(function(){
                        $(this).prop('checked', false);
                    });

                }else if(type=='edit') {
                    $("#parentid").attr('disabled',false);
                    $('input[name="showstatus"]:checked').each(function(){

                        if(data.showstatus==$(this).val()){
                            $(this).prop('checked', true);
                        }else{

                            $(this).prop('checked', false);
                        }
                    });

                    form.val('example', {
                        "parentid":data.parentid
                        ,"title": data.title
                        ,"controller": data.controller
                        ,"action": data.action
                        ,"url":data.url
                        ,"icon":data.icon
                        ,"ordernum":data.ordernum
                        //,"showstatus":data.showstatus
                        ,"id":data.id
                    });
                }else{
                    $("#parentid").attr('disabled',false);//添加子菜单的时候禁止修改父级菜单
                    $('input[name="showstatus"]:checked').each(function(){
                        $(this).prop('checked', false);
                    });
                }

                form.render();

                var mask = $(".layui-layer-shade");
                mask.appendTo(layero.parent());   //其中：layero是弹层的DOM对象
            }
        });
    }
    function ajaxSavedata(data,insTb) {
        data.flag = "{$flag}";
        $.ajax({
            url: "{:url('Sysdic/ajaxSaveData')}",
            data: data,
            type: "POST",
            success: function (e) {
                layer.closeAll()
                if(e.code==1){
                    //insTb.reload();
                    window.location.reload();
                }
                layer.msg(e.msg)
            }

        });

    }
</script>
</body>
</html>